<template>
  <div>
    <div class="header">
      <img :src="leftUrl" @click="goHome" title="回到首页" />
      <div>
        <span class="back" @click="goHome">返回首页</span>
        <span @click="goLogOut">退出登录</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { getAssetURL } from "@/utils/load_assets";
import { ElMessageBox } from "element-plus";
import { localCache } from "@/utils/cache";
import { useRouter } from "vue-router";
const router = useRouter();

const isLoginState = ref(false);
const leftUrl = getAssetURL("common/logo.png");

const goHome = () => {
  const url = router.resolve({
    path: "/client/home",
  });
  window.open(url.href, "_blank");
};

const goLogOut = () => {
  ElMessageBox.confirm("确认退出当前登录状态吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      localCache.clearCache();
      isLoginState.value = false;
      router.push("/login");
    })
    .catch(() => {});
}
</script>
<style lang="less" scoped>
.header {
  width: 100%;
  height: 70px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  cursor: pointer;
  img {
    width: 147px;
    height: 44px;
    cursor: pointer;
  }
  .back {
    margin-right: 20px;
  }
}
</style>
